<template>
	<view>
		<view class="login-img">
			<view class="owl-login" :class="hideEyes ? 'password' : ''">
				<view class="hand"></view>
				<view class="hand hand-r"></view>
				<view class="arms">
					<view class="arm"></view>
					<view class="arm arm-r"></view>
				</view>
			</view>
		</view>
		<view class="login-form">
			<form @submit="formSubmit">
				<view class="form-input"><input type="text" value="" placeholder="用户名" /></view>
				<view class="form-input"><input type="password" value="" placeholder="密码" @focus="passwordF_B" @blur="passwordF_B" /></view>
				<button type="primary" form-type="submit">登录</button>
				<button type="primary" open-type="getUserInfo" @getuserinfo="handleGetUserInfo" @error="handleGetUserInfoError">微信登录</button>
				<button type="primary" @click="loginTest">登录云函数接口测试</button>
			</form>
		</view>
	</view>
</template>

<script>
import config from '@/common/config.js'
const myCloud = uniCloud.init(config.uniCloud)
export default {
	data() {
		return {
			hideEyes: false
		}
	},
	methods: {
		passwordF_B() {
			this.hideEyes = !this.hideEyes
		},
		formSubmit(e) {
			console.log(e.detail.value)
		},
		// Handle get user info
		handleGetUserInfo(getUserInfoRes) {
			console.log(getUserInfoRes)
			if (getUserInfoRes.target.userInfo) {
				// Get code
				// #ifdef MP-WEIXIN
				uni.login({
					// provider: 'weixin',
					success: async loginRes => {
						console.log(loginRes)
						// Login
						// try {
						// 	const res = await this.$api.Account.login({
						// 		code: loginRes.code,
						// 		userInfo: getUserInfoRes.target.userInfo
						// 	})
						// 	this.$util.toast(res.msg)
						// 	if (res.success) {
						// 		// Update token
						// 		this.UPDATE_TOKEN(res.data.token)
						// 		// Update user info
						// 		this.UPDATE_USER_INFO(getUserInfoRes.target.userInfo)
						// 	} else {
						// 		this.$util.toast(res.msg)
						// 	}
						// } catch (e) {
						// 	this.$handleError.handleApiRequestException(e)
						// }
					},
					fail(e) {
						this.$handleError.handleApiRequestException(e)
					}
				})
				// #endif
			} else {
				this.$util.toast('请同意获取用户权限')
			}
		},
		// Handle get user info error
		handleGetUserInfoError(e) {
			console.log(e)
		},
		// loginTest
		loginTest() {
			myCloud
				.callFunction({
					name: 'login',
					data: {
						username: '13800000000',
						password: '123456'
					}
				})
				.then(res => {
					console.log(res)
				})
				.catch(err => {
					console.error(err)
				})
		}
	}
}
</script>

<style>
.login-form {
	margin: -9px 10px 0 10px;
	height: 200px;
	background: #007aff;
	border-radius: 10px;
	background-color: #eeeeee;
	box-shadow: 0 2px 10px #9b9b9b;
	padding: 20px;
}

.form-input input {
	background: #ffffff;
	border-radius: 5px;
	height: 40px;
	margin: 20px 0;
	padding: 0 10px;
}

.login-img {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 108px;
	margin-top: 100rpx;
}

.owl-login {
	width: 211px;
	height: 108px;
	background-image: url('');
	background-repeat: no-repeat;
	background-size: 100%;
	position: absolute;
}

.owl-login .hand {
	width: 34px;
	height: 34px;
	-webkit-border-radius: 40px;
	border-radius: 40px;
	background-color: #472d20;
	transform: scaleY(0.6);
	transition: 0.3s ease-out;
	position: absolute;
	left: 14px;
	bottom: -8px;
}

.owl-login .hand.hand-r {
	left: 170px;
}

.owl-login .arms {
	top: 58px;
	position: absolute;
	width: 100%;
	height: 41px;
	overflow: hidden;
}

.owl-login .arms .arm {
	width: 40px;
	height: 65px;
	position: absolute;
	left: 20px;
	top: 40px;
	background-image: url('');
	background-size: 100%;
	transition: 0.3s ease-out;
	transform: rotate(-20deg);
}

.owl-login .arms .arm.arm-r {
	transform: rotate(20deg) scaleX(-1);
	left: 158px;
}

.owl-login.password .hand {
	transform: translateX(42px) translateY(-15px) scale(0.7);
}

.owl-login.password .hand.hand-r {
	transform: translateX(-42px) translateY(-15px) scale(0.7);
}

.owl-login.password .arms .arm {
	transform: translateY(-40px) translateX(40px);
}

.owl-login.password .arms .arm.arm-r {
	transform: translateY(-40px) translateX(-40px) scaleX(-1);
}
</style>
